<template>
  <!-- 实名注册页 -->
  <div
    class="addWork"
    style="height: 100vh; background: #eff1fd"
  >
    <div
      class="form_box"
      style="box-sizing: border-box; background: #eef2fb"
    >
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u--form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="form1"
      >
        <div
          class="modele1"
          style="
            background: white;
            width: 100%;
            padding: 0px 10px;
            margin-top: 10px;
          "
        >
          <!-- 联系方式 -->
          <div
            class="cell1"
            style="
              padding: 10px 0px;
              display: flex;
              border-bottom: 1px solid #e8e9ea;
              box-sizing: border-box;
            "
          >
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="联系方式"></u--text>
          </div>
          <!-- 行业 -->
          <u-form-item
            borderBottom
            ref="item1"
            prop="userInfo.hangye"
            required
          >
            <template
              slot="label"
              style="display: flex; width: 100px"
            >
              <div style="color: red">*</div>
              <div :style="{
                  marginLeft: '4px',
                  fontSize: '15px',
                }">
                行业 ：
              </div>
            </template>
            <div
              style="display: flex"
              @click="show = true"
            >
              <u--input
                v-model="model1.userInfo.hangye"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择行业"
                border="none"
              ></u--input>

              <div
                @click.stop="clearContent"
                style="display: flex; align-items: center"
              >
                <u-icon
                  :name="iconClear"
                  v-if="model1.userInfo.hangye"
                ></u-icon>
              </div>
              <u-icon
                slot="right"
                name="arrow-right"
              ></u-icon>
            </div>
          </u-form-item>
          <!-- 单位 -->
          <u-form-item
            label="单位 ："
            prop="userInfo.danwei"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.userInfo.danwei"
              border="none"
              placeholder="请输入单位"
            ></u--input>
          </u-form-item>
          <!-- 职务 -->
          <u-form-item
            label="职务 ："
            prop="userInfo.zhiwu"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.userInfo.zhiwu"
              border="none"
              placeholder="请输入职务"
            ></u--input>
          </u-form-item>
          <!-- 开始时间 -->
          <u-form-item
            borderBottom
            ref="item1"
            prop="userInfo.startTime"
          >
            <template
              slot="label"
              style="display: flex; width: 100px"
            >
              <div style="color: red">*</div>
              <div :style="{
                  fontSize: '15px',
                  marginLeft: '4px',
                }">
                开始时间 ：
              </div>
            </template>
            <div
              style="display: flex"
              @click="show2 = true"
            >
              <u--input
                v-model="model1.userInfo.startTime"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择开始时间"
                border="none"
              ></u--input>

              <div
                @click.stop="clearContent"
                style="display: flex; align-items: center"
              >
                <u-icon
                  :name="iconClear"
                  v-if="model1.userInfo.startTime"
                ></u-icon>
              </div>
              <u-icon
                slot="right"
                name="arrow-right"
              ></u-icon>
            </div>
          </u-form-item>
          <!-- 已结束任职 -->
          <div
            class="cell_join"
            style="
              padding: 15px 0;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              padding-right: 15px;
              align-items: center;
            "
          >
            <u--text
              text="已结束任职"
              prefixIcon="*"
              :iconStyle="{ marginRight: '5px', color: 'red' }"
            ></u--text>
            <div class="">
              <u-radio-group
                v-model="radiovalue1"
                placement="row"
                @change="groupChange"
              >
                <u-radio
                  :customStyle="{ marginRight: '8px' }"
                  v-for="(item, index) in radiolist1"
                  :key="index"
                  :label="item.name"
                  :name="item.name"
                  @change="radioChange"
                >
                </u-radio>
              </u-radio-group>
            </div>
          </div>
        </div>
      </u--form>
      <!-- 行业选择器 -->
      <u-picker
        :show="show"
        :columns="columns"
        closeOnClickOverlay="true"
        @close="show = false"
        @confirm="pickerConfirm"
        @cancel="show = false"
      >
      </u-picker>
      <!-- 时间选择器 -->
      <u-datetime-picker
        :show="show2"
        v-model="value1"
        closeOnClickOverlay
        mode="date"
        @close="show2 = false"
        @confirm="pickerConfirm2"
        @cancel="show2 = false"
      ></u-datetime-picker>
    </div>
    <!-- 按钮区 -->
    <div
      class="btn_box"
      style="
        padding: 20px 10px;
        box-sizing: border-box;
        background: white;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
      "
    >
      <button
        @click="formSubmit"
        class="btn"
        style="background: #1990ff; color: white; border-radius: 10px"
      >
        保存
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //表单竖线图
      src: require("@/static/index/shuxian.png"),
      iconClear: require("@/static/index/icon_clear.png"),
      //行业选择器
      show: false,
      show2: false,
      columns: [["制造行业", "软件和信息行业", "金融业"]],
      //时间选择器
      value1: Number(new Date()),
      model1: {
        userInfo: {
          hangye: "", //行业
          danwei: "", //单位
          zhiwu: "", //职务
          startTime: "", //开始时间
          endOffice: "", //已结束任职
        },
      },

      rules: {
        //表单校验
        "userInfo.hangye": {
          type: "string",
          required: true,
          message: "请选择行业",
          trigger: ["blur", "change"],
        },
        "userInfo.danwei": {
          type: "number",
          required: true,
          message: "请填写单位",
          trigger: ["blur", "change"],
        },
        "userInfo.zhiwu": {
          type: "string",
          required: true,
          message: "请填写职务",
          trigger: ["blur", "change"],
        },
        "userInfo.startTime": {
          type: "number",
          required: true,
          message: "请选择开始时间",
          trigger: ["blur", "change"],
        },
        "userInfo.endOffice": {
          type: "string",
          required: true,
          message: "请选择是或者否",
          trigger: ["blur", "change"],
        },
      },

      radio: "",
      switchVal: false,
      //是否自愿单选框
      radiolist1: [
        {
          name: "是",
          disabled: false,
        },
        {
          name: "否",
          disabled: false,
        },
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radiovalue1: "否",
    };
  },
  methods: {
    //行业选择器
    pickerConfirm(n) {
      console.log(n, "确定");
      this.model1.userInfo.hangye = n.value[0];
      this.show = false;
    },
    clearContent() {
      if (
        this.model1.userInfo.hangye != "" ||
        this.model1.userInfo.startTime != ""
      ) {
        this.show = false;
        this.show2 = false;
        this.model1.userInfo.hangye = "";
        this.model1.userInfo.startTime = "";
      } else {
        this.model1.userInfo.hangye = "";
        this.model1.userInfo.startTime = "";
        this.show = false;
        this.show2 = false;
      }
    },
    //时间选择器
    pickerConfirm2(n) {
      this.model1.userInfo.startTime = n.value;
      this.show2 = false;
    },
    //是否已结束任职
    groupChange(n) {
      console.log("groupChange", n);
      this.model1.userInfo.endOffice = n;
    },
    radioChange(n) {
      console.log("radioChange", n);
    },

    //表单提交
    formSubmit() {
      let data = this.model1.userInfo;
      this.$refs.form1
        .validate()
        .then((res) => {
          uni.showToast({
            title: "保存成功！",
            duration: 2000,
            success: () => {
              setTimeout(() => {
                console.log(data, res);
                uni.reLaunch({
                  url: `/pages/personal/personal`,
                });
              }, 600);
            },
          });
        })
        .catch((errors) => {
          uni.$u.toast("请完成表单！");
          console.log(data, "222e2e");
        });
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.form1.setRules(this.rules);
    console.log(this.$cityData.values, "aaa");
  },
};
</script>
<style lang="scss" scoped>
.addWork /deep/ .u-form-item__body__right__message.data-v-006449ec {
  font-size: 12px;
  line-height: 12px;
  color: #f56c6c;
  margin-left: 100px !important;
}
</style>